<template>
	<view class="content" style="height: 100%;">
		<!-- white navbar -->
		<view
			:style="{'height':'44px','padding':'0 15px','padding-top':statusbarHeight+'px','display': 'flex','align-items': 'center','justify-content': 'center'}">
			<image src="/static/back_btn_b.png" mode="aspectFit" style="width: 20px;height: 20px;" @click="backHandle">
			</image>
			<view style="color: black;flex: 1;text-align: center;font-size: 16px;">
				钱包
			</view>
			<view style="width: 20px;height: 20px;"></view>
		</view>

		<!-- body -->
		<view style="height: 0;overflow: auto;flex: 1;padding: 0 15px;">
			<view style="height: 160px;position: relative;">
				<image src="/static/wallet-bg.png" mode="aspectFit"
					style="position: absolute;left: 0;top: 0;width: 100%;height: 100%;display: block;"></image>
				<view
					style="position: absolute;left: 0;top: 0;height: 100%;width:100%;display: flex;flex-direction: column;justify-content: center;">
					<!-- num -->
					<view style="display: flex;justify-content: space-between;padding-left: 26px;padding-right: 15px;">
						<view style="display: flex;">
							<view style="font-size: 11px;color: white;">账户余额</view>
							<image src="/static/wallet-icon-show.png" style="width: 16px;height: 16px;margin-left: 5px;"
								mode="aspectFit"></image>
						</view>
						<!-- 充值按钮 -->
						<image src="/static/wallet-chongzhi.png" style="width:65px;height: 32px;" mode="aspectFit"
							@click="recharge">
						</image>
					</view>
					<view style="display: flex;flex-direction: row;align-items: baseline;padding-left: 26px;">
						<text style="font-size: 20px;color: white;">￥</text>
						<text style="font-size: 36px;color: white">{{amount}}</text>
					</view>
				</view>
			</view>
			<!-- section header -->
			<view style="padding: 12px 0;background-color: white;display: flex;align-items: center;">
				<view style="display: flex;flex: 1;align-items: center;">
					<text style="font-size: 16px;font-weight: bold;">本周</text>
					<image src="/static/icon-down.png" style="width: 12px;height: 12px;" mode="aspectFit"></image>
				</view>
				<view style="width: 1px;height: 14px;background-color: #999999;"></view>
				<view style="display: flex;flex: 1;align-items: center;flex-direction: row-reverse;">
					<text style="font-size: 12px;color: #999999;">收入 ¥{{totalIn}} 支出 ¥{{totalPay}}</text>
				</view>
			</view>
			<!-- cells -->
			<view style="" v-for="(item,index) in walletData" :key="index">
				<view style="display: flex;padding: 12px 0;align-items: center;">
					<!-- left -->
					<view style="flex: 1;">
						<view style="font-size: 14px;font-weight: bold">{{item.bizType}}</view>
						<view style="font-size: 11px;color: #999999;margin-top: 6px;margin-bottom: 4px;">{{item.paySn}}
						</view>
						<view style="font-size: 10px;color: #999999;">{{item.payTime}}</view>
					</view>
					<!-- right -->
					<view class="">
						<view style="font-size: 16px;font-weight: 400">{{item.price}}</view>
						<!-- <view style="font-size: 10px;color: #999999;margin-top: 6px;">余额：250.00</view> -->
					</view>
				</view>
				<view style="height: 1px;background-color: #ebebeb;"></view>
			</view>
		</view>
		<!-- tabbar -->
		<view class="">
			<view style="height: 1px;background-color: #e5e5e5;"></view>
			<view style="height: 49px;background-color: white;padding-bottom: constant(safe-area-inset-bottom);padding-bottom: env(safe-area-inset-bottom);
				display: flex;justify-content: space-around;padding-top: 12px;">
				<view style="">
					<image src="/static/wallet-tab-list.png" mode="aspectFit" style="width: 19px;height: 19px;"></image>
					<view style="font-size: 11px;color: #999999;margin-bottom: 4px;">提现</view>
				</view>
				<view style="">
					<image src="/static/wallet-tab-transform.png" mode="aspectFit" style="width: 19px;height: 19px;">
					</image>
					<view style="font-size: 11px;color: #999999;margin-bottom: 4px;">转账</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		walletData,
		walletDetails,
		rechargeWallet
	} from '../../api'
	export default {
		data() {
			return {
				statusbarHeight: 0,
				amount: 0,
				walletData: [],
				totalPay: 0,
				totalIn: 0
			}
		},
		mounted() {
			this.statusbarHeight = getApp().globalData.statusBarHeight;
			this.myWallet()
			this.userWelletDetail()
		},
		methods: {
			backHandle() {
				uni.navigateBack();
			},
			// 保留2位小数处理
			priceToFixed(num, digit = 2) {
				let nums = (num || 0).toString().split('.');
				return nums[0] + '.' + (nums[1] || '0').padEnd(digit, "0");
			},
			myWallet() {
				let userId = uni.getStorageSync('userInfo').id
				let data = {
					userId: userId
				}
				walletData(data).then(res => {
					console.log('我的钱包页===', res.data)
					if (res.status == 200) {
						this.walletData = res.data
						this.walletData.forEach(item => {
							if (item.type == '支出') this.totalPay += item.price
							if (item.type == '收入') this.totalIn += item.price
							return (item.price = this.priceToFixed(item.price), this.totalPay, this
								.totalIn)
						})
						this.totalPay = this.priceToFixed(this.totalPay)
						this.totalIn = this.priceToFixed(this.totalIn)
					}
				})
			},
			userWelletDetail() {
				let userId = uni.getStorageSync('userInfo').id
				let data = {
					userId: userId
				}
				walletDetails(data).then(res => {
					console.log('我的钱包详情===', res.data)
					if (res.status == 200) {
						this.amount = this.priceToFixed(res.data.amount)
					}
				})
			},
			//充值
			recharge() {
				//1、获取的code调用后端接口，后端生成一个openId
				let AUTH = uni.getStorageSync("token")
				let data = {
					Authorization: AUTH
				}
				rechargeWallet(data).then(res => {
					if(res.status == 200){
						//2、把openId发送给后端，去调用微信官方的支付接口
						uni.requestPayment({
							provider: 'wxpay', //服务提供商
							appId: res.data.appId,
							timeStamp: res.data.timeStamp, //时间戳，从1970年1月1日00:00:00 至今的秒数，即当前的时间
							nonceStr: res.data.nonceStr, //随机字符串，长度为32个字符以下
							package: res.data.package, //统一下单接口返回的 prepay_id 参数值，提交格式如：prepay_id=***
							signType: res.data.signType, //签名算法，应与后台下单时的值一致
							paySign: res.data.paySign, //签名
							success: (res) => {
								//支付成功的操作
							},
							fail: (err) => {
								// console.log(err);
								uni.showToast({
									icon: 'none',
									title: '支付失败，请重新支付'
								})
							}
						})
					}
				})
				
			}
		}
	}
</script>

<style>

</style>